<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      #output{
          display: block;
          width: 200px;
          min-height: 10px;
          border: 1px solid #000;
      }
    </style>
</head>
<body>

    <h2>整个层次结构有效</h2>

    <div>
        <h5>Original content</h5>
        <p>
            inside paragraph
            <span>inside span</span>
            inside paragraph
        </p>
    </div>
    <div>
        <h5>Output</h5>
        <div id="output"></div>
    </div>


    <input type="button" value="do" onclick=" justDo()">


<!-- TODO  <h2>查找一个具有特殊属性值的元素</h2>-->

<!--  TODO  <h2>一个更复杂的选择器</h2>-->
<!--    这里，一个类属性为“user-panel main”的div元素<div>( <div class="user-panel main">)里面包含一个name属性为“login”的输入元素<input>( <input name="login"/>)，如何选择，如下所示：-->

</body>

<script>

    function justDo(){
        var baseElement = document.querySelector("p");
        document.getElementById("output").innerHTML = baseElement.querySelector("div span").innerHTML;
    }



    function gotIt() {
        var box1 = document.body.querySelector("style[type='text/css'], style:not([type])");
        console.log(box1);
        // box1.innerHTML = "<mark>hello</mark>";
    }

    var el = document.querySelector("div.user-panel.main input[name='login']");

</script>

</html>